<template>
  <div class="container">
    <!-- <div class="sidebar">
      <a-table
        :columns="columns"
        :data="treeData"
        :pagination="false"
        @row-click="rowClickFunc"
        class="my-table"
      >
        <template #tr="{ record }">
          <tr :class="actRow === record.satelliteId ? 'my-tr' : ''"></tr>
        </template>
      </a-table>
    </div> -->
    <div class="main-content">
      <div class="settings">
        <a-button
          type="primary"
          @click="openModal"
          style="width: 100px; float: right; z-index: 99; margin-bottom: 20px; cursor: pointer"
        >
          新建
        </a-button>
        <a-spin :loading="loading">
          <a-table :data="satData" :pagination="false">
            <template #columns>
              <a-table-column title="序号" data-index="satName">
                <template #cell="{ rowIndex }">
                  {{ rowIndex + 1 }}
                </template>
              </a-table-column>
              <a-table-column title="模板名称" data-index="name"></a-table-column>
              <!-- <a-table-column
                title="遥测参数"
                data-index="paramName"
              ></a-table-column> -->
              <a-table-column title="监测帧数" data-index="monitorNum"></a-table-column>
              <a-table-column title="监测值" data-index="value"></a-table-column>
              <a-table-column title="备注" data-index="notes"></a-table-column>
              <a-table-column title="创建时间" data-index="createDate"></a-table-column>
              <a-table-column title="操作" :width="255" align="center">
                <template #cell="{ record }">
                  <a-space>
                    <!-- <a-button type="text">绑定</a-button>
                    <a-button type="text">解绑</a-button> -->
                    <a-button type="text" status="success" style="color: #00b3b3" @click="editConfigItem(record)"
                      >修改</a-button
                    >
                    <a-button type="text" status="warning" @click="deleteConfigItem(record)">删除</a-button>
                  </a-space>
                </template>
              </a-table-column>
            </template>
          </a-table>
          <a-pagination
            class="my-1"
            style="float: right; margin-right: 20px; margin-top: 20px; justify-content: end"
            :total="paginationData.total"
            :current="paginationData.page"
            :page-size="paginationData.pageSize"
            show-total
            show-jumper
            show-page-size
            @change="handleCurrentChange"
            @page-size-change="handleSizeChange"
          />
        </a-spin>
      </div>
    </div>
  </div>
  <a-modal
    v-model:visible="showModal"
    :title="modalTitle"
    @before-ok="handleSubmit"
    @cancel="handleCancel"
    class="modelCont"
    :width="600"
  >
    <a-form :model="form" ref="formRef" class="formData">
      <a-row>
        <a-col :span="20">
          <a-form-item label="名称" field="name" :rules="[{ required: true, message: '必填项' }]">
            <a-input v-model="form.name" placeholder="请输入名称"> </a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <!-- <a-row>
        <a-col :span="20">
          <a-form-item
            label="遥测参数"
            field="paramObj"
            :rules="[{ required: true, message: '必选项' }]"
          >
            <a-select
              v-model="form.paramObj"
              allow-clear
              placeholder="请选择监测帧数"
              value-key="paramId"
            >
              <a-option
                v-for="(item, index) in ycParamList"
                :key="index"
                :value="item"
                :label="item.paramName"
              ></a-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row> -->
      <a-row>
        <a-col :span="20">
          <a-form-item label="监测帧数" field="monitorNum" :rules="[{ required: true, message: '必选项' }]">
            <a-select
              v-model="form.monitorNum"
              :options="monitorEnmu"
              allow-clear
              :field-names="{ value: 'id', label: 'name' }"
              placeholder="请选择监测帧数"
            >
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="20">
          <a-form-item label="监测值" field="value" :rules="[{ required: true, message: '必填项' }]">
            <a-input v-model="form.value" placeholder="请输入监测值"> </a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="20">
          <a-form-item label="备注" field="">
            <a-textarea v-model="form.notes" placeholder="请输入备注"> </a-textarea>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { apiHome } from '@/api'
import { apiAnalysis } from '@/api/analysis'
import { Message, Modal } from '@arco-design/web-vue'
const showModal = ref(false)
const modalTitle = ref('')
// getSelectParams
const columns = [
  {
    title: '卫星',
    dataIndex: 'satelliteName'
  }
]
const paginationData = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 10
})

const loading = ref(false)

const monitorEnmu = reactive([
  {
    id: 1,
    name: '1'
  },
  {
    id: 2,
    name: '2'
  },
  {
    id: 3,
    name: '3'
  },
  {
    id: 4,
    name: '4'
  },
  {
    id: 5,
    name: '5'
  }
])

const form = reactive({})

const actRow = ref(null)
const handleCurrentChange = (val) => {
  paginationData.pageNum = val
  getTableData()
}
const handleSizeChange = (val) => {
  paginationData.pageSize = val
  getTableData()
}
const treeData = ref([])
const satData = ref([])
const getTreeData = () => {
  apiHome.satellites().then((res) => {
    if (+res.code === 200) {
      treeData.value = res.data || []
      actRow.value = res.data[0].satelliteId
      getTableData()
      getSelectParams()
    }
  })
}
const ycParamList = ref([])
const getSelectParams = () => {
  apiHome.getSelectParams({ satId: actRow.value }).then((res) => {
    ycParamList.value = res?.data || []
  })
}
const getTableData = () => {
  loading.value = true
  apiAnalysis
    .getPageList({
      pageNum: 1,
      pageSize: 10,
      satelliteId: actRow.value || 0
    })
    .then((res) => {
      if (+res.code === 200) {
        loading.value = false
        paginationData.total = +res.data?.total || 0
        satData.value = res.data?.list || []
      }
    })
    .finally(() => {
      loading.value = false
    })
}

const openModal = () => {
  form.id = ''
  form.notes = ''
  showModal.value = true
  modalTitle.value = '新建遥测参数常值监测'
}

const editConfigItem = (row) => {
  apiAnalysis.getConstantMonitorDetail(row.id).then((res) => {
    if (+res.code === 200) {
      modalTitle.value = '编辑'
      showModal.value = true
      form.id = res.data.id
      form.paramObj = res.data
      form.name = res.data.name
      form.monitorNum = res.data.monitorNum
      form.value = res.data.value
      form.notes = res.data.notes
    }
  })
}

const deleteConfigItem = (row) => {
  Modal.confirm({
    title: '删除',
    content: '确定删除吗？',
    onOk: () => {
      apiAnalysis.deleteConstantMonitor(row.id).then((res) => {
        if (+res.code === 200) {
          getTableData()
          Message.success('删除成功')
        }
      })
    }
  })
}

const formRef = ref(null)
const handleSubmit = (done) => {
  formRef.value.validate((errors) => {
    if (!errors) {
      Object.assign(form, {
        deviceCode: form.paramObj?.deviceCode,
        deviceId: form.paramObj?.deviceId,
        deviceName: form.paramObj?.deviceName,
        paramCode: form.paramObj?.paramCode,
        paramId: form.paramObj?.paramId,
        paramName: form.paramObj?.paramName,
        satCode: form.paramObj?.satCode,
        satId: form.paramObj?.satId,
        satName: form.paramObj?.satName,
        subsystemId: form.paramObj?.subsystemId,
        subsystemName: form.paramObj?.subsystemName
      })
      delete form.paramObj

      const api = form.id ? apiAnalysis.updateConstantMonitor : apiAnalysis.addConstantMonitor
      api(form).then((res) => {
        if (+res.code === 200) {
          getTableData()
          handleCancel()
          Message.success(form.id ? '编辑成功' : '新建成功')
          done()
        } else {
          done(false)
        }
      })
    } else {
      console.log('error', errors)
      done(false)
    }
  })
  // form.paramCode = form.paramObj.paramCode
  // form.paramId = form.paramObj.paramId
  // form.paramName = form.paramObj.paramName
  // form.satCode = form.paramObj.satCode
  // form.satId = form.paramObj.satId
  // form.satName = form.paramObj.satName
  // form.subsystemId = form.paramObj.subsystemId
  // form.subsystemName = form.paramObj.subsystemName
  // console.log(form, "111");
}

const handleCancel = () => {
  formRef.value.resetFields()
  showModal.value = false
}

const rowClickFunc = (record) => {
  actRow.value = record.satelliteId
  getTableData()
  getSelectParams()
}

onMounted(() => {
  getTreeData()
})
</script>

<style lang="less" scoped>
.container {
  display: flex;
  min-height: calc(100vh - 56px);
}

.sidebar {
  width: 250px;
  padding: 20px;
  border-right: 1px solid #f0f0f0;
}
h2 {
  text-align: center;
  font-family:
    Microsoft YaHei,
    Microsoft YaHei,
    serif;
  font-weight: bold;
  font-size: 18px;
  color: #222222;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.settings {
  margin-bottom: 20px;
}
.my-tr {
  background: #1d68d0;
  color: #fff;
  :deep(td) {
    background: #1d68d0;
    color: #fff;
  }
}
.my-tr :hover {
  background: #1d68d0;
  color: #fff;
}
.my-table tr {
  cursor: pointer;
}
:deep(.arco-btn-size-medium) {
  padding: 0;
}
</style>
